<template>
  <div class="wrap" id="editWorkflow">
    <div class="main-box bindData-content">
      <div class="main-lf">
        <div class="m-b-10">
          <el-select placeholder="全部组件" v-model="value">
            <el-option
              v-for="item in themeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="main-lf-menu">
          <el-input
            placeholder="请输入表名称 "
            clearable
            v-model="filterText"
            suffix-icon="el-icon-search"
          ></el-input>
        </div>
        <div class="workflow-tab flex_auto node-template">
          <el-scrollbar wrap-style="height: 100%;">
            <el-collapse v-model="activeNames" accordion>
              <el-collapse-item
                v-for="m in nodeTypeList"
                :title="m.title"
                :name="m.id"
                :key="m.id"
              >
                <div class="nodes-wrap">
                  <div
                    v-for="n in m.children"
                    :key="n.type"
                    class="node"
                    draggable="true"
                    @dragstart="drag($event, n)"
                  >
                    <div class="log">
                      <img :src="n.logImg" alt="" />
                    </div>
                    <div class="name">{{ n.typeName }}</div>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-scrollbar>
        </div>
      </div>
      <div class="main-rg">
        <h5 class="title">近三年教学科研设备仪器总值</h5>
        <div class="mining-tab-box flex_column flex_auto">
          <div class="mining-tab">
            <span>
              <el-button
                @click="handleShowLog"
                type="text"
                icon="el-icon-video-pause"
                :loading="isOperate"
                size="small"
                >运行</el-button
              >
            </span>
            <span>
              <el-button
                size="small"
                @click="stopShowLog"
                type="text"
                icon="el-icon-video-play"
                :loading="isStop"
                >停止</el-button
              >
            </span>
            <span>
              <el-button
                @click="scheduling"
                type="text"
                icon="el-icon-s-operation"
                :loading="isScheduly"
                size="small"
                >调度</el-button
              >
            </span>

            <span v-if="isParent">
              <el-button
                @click="handleEdit"
                type="text"
                icon="el-icon-edit"
                size="small"
                >编辑</el-button
              >
            </span>
            <span v-else>
              <el-button
                @click="submit"
                type="text"
                icon="iconfont icon-baocun"
                size="small"
                >保存</el-button
              >
            </span>
          </div>
          <!-- 添加辅助线 -->
          <div
            id="flowWrap"
            ref="flowWrap"
            class="flow-wrap"
            @drop="drop($event)"
            @dragover="allowDrop($event)"
          >
            <div id="flow" ref="flowRef">
              <div
                v-show="auxiliaryLine.isShowXLine"
                class="auxiliary-line-x"
                :style="{
                  width: auxiliaryLinePos.width,
                  top: auxiliaryLinePos.y + 'px',
                  left: auxiliaryLinePos.offsetX + 'px',
                }"
              ></div>
              <div
                v-show="auxiliaryLine.isShowYLine"
                class="auxiliary-line-y"
                :style="{
                  height: auxiliaryLinePos.height,
                  left: auxiliaryLinePos.x + 'px',
                  top: auxiliaryLinePos.offsetY + 'px',
                }"
              ></div>
              <flowNode
                v-for="item in data.nodeList"
                :id="item.id"
                :key="item.id"
                :node="item"
                @setNodeName="setNodeName"
                @deleteNode="deleteNode"
                @changeLineState="changeLineState"
              ></flowNode>
            </div>
          </div>
          <!-- 运行日志 -->
          <el-collapse v-model="activeNames">
            <el-collapse-item title="运行日志" name="1">
              <template slot="title">
                运行日志
                <el-button
                  :loading="isRefresh"
                  @click.stop="refreshLog"
                  type="text"
                  icon="el-icon-refresh"
                  size="small"
                  class="m-l-10"
                ></el-button>
              </template>
              <div class="log-box">
                <code-editor
                  :height="logHeight"
                  :content="logCentent"
                ></code-editor>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { jsPlumb } from "jsplumb";
import { nodeTypeList } from "./config/init";
import {
  jsplumbSetting,
  jsplumbConnectOptions,
  jsplumbSourceOptions,
  jsplumbTargetOptions,
} from "./config/config";
import methods from "./config/methods";
import data from "./config/data.json";
import flowNode from "./components/node-item";
import CodeEditor from "@/components/common/CodeEditor";

export default {
  name: "workFlow",
  components: { flowNode, CodeEditor },
  data() {
    return {
      jsPlumb: null,
      currentItem: null,
      nodeTypeList,
      nodeTypeObj: {},
      data: {
        nodeList: [],
        lineList: [],
      },
      selectedList: [],
      jsplumbSetting,
      jsplumbConnectOptions,
      jsplumbSourceOptions,
      jsplumbTargetOptions,
      auxiliaryLine: { isShowXLine: false, isShowYLine: false }, //对齐辅助线是否显示
      auxiliaryLinePos: {
        width: "100%",
        height: "100%",
        offsetX: 0,
        offsetY: 0,
        x: 20,
        y: 20,
      },
      commonGrid: [5, 5], //节点移动最小距离
      selectModuleFlag: false, //多选标识
      rectAngle: {
        px: "", //多选框绘制时的起始点横坐标
        py: "", //多选框绘制时的起始点纵坐标
        left: 0,
        top: 0,
        height: 0,
        width: 0,
      },
      activeNames: [1],
      value: "",
      filterText: "", //关键字
      themeList: [
        {
          label: "输入",
          value: 1,
        },
        {
          label: "输出",
          value: 2,
        },
        {
          label: "转换",
          value: 3,
        },
        {
          label: "脚本",
          value: 4,
        },
        {
          label: "算法",
          value: 5,
        },
      ],
      isRefresh: false,
      logHeight: 400,
      logCentent: "", //日志内容
      isParent: false,
    };
  },
  created() {
    this.jsPlumb = jsPlumb.getInstance();
    this.initNodeTypeObj();
    this.initNode();
    this.fixNodesPosition();
    this.$nextTick(() => {
      this.init();
      // this.setHeight();
    });
  },
  methods: {
    ...methods,
    initNodeTypeObj() {
      this.flatChild(nodeTypeList).map((v) => {
        this.nodeTypeObj[v.type] = v;
      });
    },

    // children数组平铺
    flatChild(arr) {
      var newArr = [];
      arr.forEach((element) => {
        if (element.children) {
          newArr.push.apply(newArr, element.children);
        }
      });
      return newArr;
    },

    initNode() {
      this.data.lineList = data.lineList;
      data.nodeList.map((v) => {
        v.logImg = this.nodeTypeObj[v.type].logImg;
        v.log_bg_color = this.nodeTypeObj[v.type].log_bg_color;
        this.data.nodeList.push(v);
      });
    },
    // 刷新日志
    refreshLog() {},
    stopShowLog() {},
    scheduling() {},
    handleEdit() {},
    submit() {},
  },
};
</script>
<style lang="less" scoped>
.bindData-content {
  display: flex;
  height: 100vh;
  .main-lf {
    // width: 300px;
    overflow: auto;
    .flex_auto {
      overflow: unset;
    }
  }
  .workflow-tab {
    .module-box {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 33%;
        margin: 10px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        font-size: 12px;
        color: #666;
        cursor: pointer;
        img {
          max-width: 46px;
        }
      }
    }
  }

  .main-rg {
    width: 79%;
    overflow: hidden;
    background: #fff;
    .mining-tab-box {
      border-bottom: 1px solid #ebebeb;
      .canvas-box {
        width: 100%;
        height: 100%;
      }
      .iconfont {
        color: #666 !important;
      }
    }
  }
}
.bindData-content .my-tree {
  height: calc(100vh - 320px);
  margin-bottom: 10px;
  overflow: auto;
}

#editWorkflow /deep/ .table-header {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#editWorkflow {
  display: flex;
  width: 100%;
  height: 100%;
  .nodes-wrap {
    height: 100%;
    .node {
      display: flex;
      height: 40px;
      width: 90%;
      margin: 5px auto;
      border: 1px solid #ccc;
      line-height: 40px;
      &:hover {
        cursor: grab;
      }
      &:active {
        cursor: grabbing;
      }
      .log {
        width: 40px;
        height: 40px;
      }
      .name {
        width: 0;
        flex-grow: 1;
      }
    }
  }
  .el-select {
    width: 100% !important;
  }
}
.flow-wrap {
  height: 100%;
  position: relative;
  overflow: hidden;
  outline: none !important;
  flex-grow: 1;
  background-image: url("~@/assets/images/point.png");
  #flow {
    position: relative;
    width: 100%;
    height: 100%;
    .auxiliary-line-x {
      position: absolute;
      border: 0.5px dashed #2ab1e8;
      z-index: 9999;
    }
    .auxiliary-line-y {
      position: absolute;
      border: 0.5px dashed #2ab1e8;
      z-index: 9999;
    }
  }
}

.log-box {
  padding: 0px 15px 10px;
  line-height: 28px;
  .content {
    box-sizing: border-box;
  }
}

.mining-tab {
  padding: 4px 20px 0;
  display: flex;
  // justify-content: space-between;
  border-bottom: 1px solid #ebebeb;
  span {
    margin-right: 10%;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    i {
      margin-right: 5px;
    }
    &:hover {
      color: #20a0ff;
    }
  }
}
</style>
<style lang="less">
.jtk-connector.active {
  z-index: 9999;
  path {
    stroke: #150042;
    stroke-width: 1.5;
    animation: ring;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    stroke-dasharray: 5;
  }
}
@keyframes ring {
  from {
    stroke-dashoffset: 50;
  }
  to {
    stroke-dashoffset: 0;
  }
}
</style>
